<template>
    <Teleport to="body">
        <div
            ref="popup"
            class="popup"
            v-show="user.identity ==='student'&&props.show"
            :style="{
            top: posY,
            left: posX
        }"
        >
            <slot>
            </slot>
        </div>
    </Teleport>
</template>

<script setup>
import {onClickOutside, useElementSize} from "@vueuse/core";
import {useUserStore} from "@/stores/user";

const props = defineProps(['show', 'onClickOutside', "x", "y"])
const popup = ref(null)
const user = useUserStore()

// 点击外部
onClickOutside(popup, (event) => {
    if (props.show) {
        console.log(event)
        props.onClickOutside(event);
    }
})
// 视口的宽高
const vw = ref(document.documentElement.clientWidth)
const vh = ref(document.documentElement.clientHeight)
// 元素的宽高
const {width, height} = useElementSize(popup)

// 元素的X坐标
const posX = computed(() => {
    let x = props.x
    if (x > vw.value - width.value) {
        x = x - width.value
    }
    return x + "px"
})
// 元素的Y坐标
const posY = computed(() => {
    let y = props.y
    if (y > vh.value - height.value) {
        y = vh.value - height.value - 50
    }
    return y + 'px';
})
</script>

<style scoped lang="less">
.popup {
    position: fixed;
    z-index: 1000;
}

</style>